<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>02_JSX_DEMO</title>
</head>
<body>
  <h2>前端JS框架列表</h2>

  <div id="example1"></div>

  <script src="../../lib/js/react.development.js"></script>
  <script src="../../lib/js/react-dom.development.js"></script>
  <script src="../../lib/js/babel.min.js"></script>

  <script type="text/babel">
    /*
     功能: 动态展示列表数据
     */
    /*
    问题: 如何将一个数据的数组转换为一个标签的数组?
        使用数组的map()
    */
    const names = ['jQuery', 'zepto', 'angular', 'react', 'vue']

    // 1. 创建虚拟DOM
    /*
    <ul>
      <li>{name}</li>
    </ul>
     */
    const ul = (
      <ul>
        {
          names.map((name, index) => <li key={index}>{name}</li>)
        }
      </ul>
    )

    //2. 渲染虚拟DOM
    ReactDOM.render(ul, document.getElementById('example1'))

  </script>

</body>
</html>
